<template>
	<pages class="content" ref="pages">
		<view class="navBox paddingContent">
			<view @click.stop="slideShow">
				<cicon name="moreSetting" :size="36"></cicon>
			</view>
			<view>
				所有歌曲
			</view>
			<view @click.stop="showSearch">
				<cicon name="search" :size="36"></cicon>
			</view>
		</view>
		
		 
		<uni-transition class="searchBox paddingContent" mode-class="slide-top" :show="searchBoxShow" @change="autoFocus">	
			<view>
				<view>
					<cicon name="search" :size="28" color="#bbbbbb"></cicon>
					<input ref="search" :focus="focus" v-model="searchKey" :placeholder="'在曲库中搜索'" />
					<cicon @click.stop="searchKey=''" name="close" :size="30" color="#bbbbbb"></cicon>
				</view>
				<view @click="cancelSearch">取消</view>
			</view>
		</uni-transition>	
 
		
		
		<view class="loading" v-if="isRequest">
			<view><cicon name="loading" :size="34"></cicon></view>
			努力加载中 ..
		</view>
		<view class="musicListBox" v-else>
			<template v-if="musicList.length!=0" v-for="(music,index) in musicList">
				<view  class="mItem" hover-class="hoverItem" @click="music_detail(music)"  >
					<view>
						<view>
							<image @error="changeImg(index)" :src="music.cover" mode="aspectFill"></image>
							
						</view>
						<view :class="playingId===music.id?'isPlaying':''">
							<view>{{music.title}}</view>
							<view>
								<view>
									<cicon v-if="music.quality==='SQ'" name="sq" :size="42"></cicon> 
									<cicon v-if="music.quality==='HQ'" name="hq" :size="42"></cicon>  
								</view>
								<view>{{music.singer+' - '+music.album}}</view>
							</view>
						</view>
					</view>
					
					<view  @click.stop="musicInfo(music,index)">
						<cicon name="more" :size="32"></cicon>
					</view>
				</view>
			</template>
		
			<template v-else>
				<view class="emptyBox">
					<image :src="empty" mode="aspectFit"></image>
					<text>空空如也 ~</text>
				</view>
			</template>
		</view>
		
		
		<!-- 歌曲详情 -->
		<music-info ref="musicInfo"></music-info>
		<!-- 侧栏 -->
		<slider-setting ref="sliderSetting"></slider-setting>
		
	</pages>
</template>

<script>
	 
	import musicInfo from "@/components/musicInfo.vue"
	import sliderSetting from "@/components/sliderSetting.vue"
	import empty from '@/static/empty.png'
	import defaultCover from '@/static/cover.png'
	
	export default {
		components: {
			 
			musicInfo,
			sliderSetting
		},
		data() {
			return {
				empty,
				musicList:[],
				originMusicList:[],
				playMusic:[],
				isRequest:false,
				searchKey:'',
				searchBoxShow:false,
				focus:false,
				playList:[],  //全局播放列表
				playingId:'',
				globalPlayer:null
				
			}
		},
		onLoad() {
			if(this.$TOOL.getSid()){
				this.get_music_list()
				this.isPlaying() 
			}
			this.$nextTick(()=>{
				this.globalPlayer = this.$refs.pages.$refs.mplayer
			})
		},
		
		 
		
		onBackPress() {
			// 退回桌面后台播放
			let main = plus.android.runtimeMainActivity();
			plus.android.invoke(main, 'moveTaskToBack', false);
			return true;
		},
		 
		watch:{
			searchKey(val){
				//触发搜索
				let newMusicList = []
				if(val!==''){
					this.originMusicList.forEach((music)=>{
						if(music.title.indexOf(val) !== -1 || music.singer.indexOf(val) !== -1 || music.album.indexOf(val) !== -1){
							newMusicList.push(music)
						}
					})
				}else{
					newMusicList = this.originMusicList
				}
				this.musicList = newMusicList
			},
		},
		methods: {
			get_music_list(){
				this.isRequest = true
				this.$API.get_music_list.request({
					_sid:this.$TOOL.getSid(),
					additional: 'song_tag,song_audio,song_rating',
					sort_by: 'title',
					sort_direction: 'ASC'
				}).then(async (e)=>{
					let dataList = e.data.songs
					let musicList = []
					
					for(let i in dataList){
						let music = dataList[i]
						let codec = music.additional.song_audio.codec
						let cover = this.$TOOL.data.get('server_url')+this.$API.get_music_cover.url+'&id='+music.id
						
						// let exists = await this.$TOOL.urlExists(cover)
						// if(exists=='404'){
						// 	cover = defaultCover
						// }
						
						let item = {
							id:music.id,
							title:music.title,
							singer:music.additional.song_tag.artist,
							album:music.additional.song_tag.album,
							quality:(codec==='flac' || codec==='ape') ? 'SQ' : 'HQ',
							cover:cover,
							music:music,
							isPlay:0
						}
						musicList.push(item) 
					}
 
					this.musicList = musicList
					this.originMusicList = musicList
					this.isRequest = false
				})
			},
			
			
			music_detail(music){
				 
				let playingMusic = this.$TOOL.data.get('playMusic')
				if(playingMusic===null){
					 
					this.globalPlayer.playMusic(music)
					this.isPlaying()
				}else{
					
					 
					if(playingMusic.id!==music.id){
						this.globalPlayer.playMusic(music) 
						this.isPlaying()
					}
				}
				
				
				
			},
			
			musicInfo(music,index){
				this.$refs.musicInfo.renderData(music,index).show()
			},
			
			slideShow(){
				this.$refs.sliderSetting.show()
			},
			
			showSearch(){
				this.searchBoxShow = true
			},
			
			cancelSearch(){
				this.searchKey = ''
				this.searchBoxShow = false
			},
			autoFocus(e){
				this.focus = e.detail
			}, 
			
			isPlaying(){ 
				let playingMusic = this.$TOOL.data.get('playMusic')
				if(playingMusic){
					this.playingId = playingMusic.id
				}
				 
			},
			changeImg(index){
				this.musicList[index].cover = defaultCover
			},
			
			
			
			
		}
	}
</script>

<style scoped lang="scss">
	 
	 
	
	.musicListBox{
		height: calc( 100vh - 290rpx);
		overflow-y: auto;
		padding-bottom: 150rpx;
		background: #F9FAFC; 
		.mItem{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 40rpx;
			transition: 0.3s;
			>view{
				&:first-child{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					width: calc( 100% - 66rpx);
					image{
						width: 90rpx;
						height: 90rpx;
						border-radius: 12rpx;
						display: block;
					}
					>view{
						 
						&:last-child{
						   margin-left: 24rpx;
						   width: calc(100% - 124rpx);
						   >view{
							   &:first-child{
								   font-size: 30rpx;
								   font-weight: 700;
								   white-space: nowrap; 
								   width: 100%; 
								   overflow: hidden;
								   text-overflow:ellipsis;
								   
							   }
							   &:last-child{
								   font-size: 22rpx;
								   font-weight: 400;
								   margin-top: 8rpx;
								   display: flex;
								   align-items: center;
								   justify-content: flex-start;
								   
								   >view{
									   &:first-child{
										   display: flex;
										   align-items: center;
										   justify-content: center;
										   display: block;
										   margin-right: 8rpx;
									   }
									   &:last-child{
										   white-space: nowrap;
										   width: 100%; 
										   overflow: hidden;
										   text-overflow:ellipsis;
									   }
									   
								   }
								   
								   
							   }
						   }
						}
					}
				}
				
				&:last-child{
					width:80rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
		}
	}
	
	
	.searchBox{
		height: 140rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 0 12px #0000001f; 
		background: #ffffff; 
		position: absolute; 
		top: 0;
		left: 0;
		width:calc(100vw - 80rpx);
		>view{ 
			position: relative;
			top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			>view{
				&:first-child{
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					background: rgba(100, 100, 100, 0.1);
					padding: 14rpx 18rpx;
					border-radius: 50rpx;
					input{
						font-size: 24rpx;
						width: calc(100% - 80rpx);
						color: #666666;
						margin: 0 20rpx;
						margin-left: 10rpx;
						position: relative;
						top: 2rpx;
					}
				}
				
				&:last-child{
					font-size: 24rpx;
					color: $uni-color-primary;
					width: 50rpx;
					min-width: 50rpx;
					margin-left: 30rpx;
				}
			}
		}
	}
	
	
	.emptyBox{
		padding-top: 200rpx;
		image{
			display: block;
			width: 200rpx;
			height:200rpx;
			margin: 0 auto;
		}
		text-align: center;
		font-size: 24rpx;
		text{
			opacity: 0.4;
		}
		
	}
	
</style>
